import React, { useState, useRef } from 'react';
import { ParallelFlow } from '@alipay/fincore-pc-components';
import { Card, Radio, Row, Col } from 'antd';

const mockData: any = {
  activityId: 0,
  finishDate: 1616503154000,
  next: {
    activityId: 0,
    finishDate: 1616503156000,
    next: {
      activityId: 0,
      finishDate: 1616503158000,
      next: {
        activityId: 0,
        finishDate: null,
        next: {
          activityId: 0,
          finishDate: null,
          next: {
            activityId: 0,
            finishDate: 1616569061000,
            next: {
              activityId: 0,
              finishDate: null,
              next: null,
              node: '结束',
              sourceActId: 0,
              subSteps: [],
              type: 'Stop',
              units: [],
            },
            node: '',
            sourceActId: 0,
            subSteps: [
              {
                activityId: 0,
                finishDate: null,
                next: null,
                node: '额外分支1',
                sourceActId: 0,
                subSteps: [],
                type: 'UserTask',
                units: [],
              },
            ],
            type: '',
            units: [],
          },
          node: '结束前人审',
          sourceActId: 0,
          subSteps: [],
          type: 'UserTask',
          units: [],
        },
        node: '',
        sourceActId: 0,
        subSteps: [
          {
            activityId: 0,
            finishDate: 1616503694000,
            next: {
              activityId: 0,
              finishDate: null,
              next: {
                activityId: 0,
                finishDate: null,
                next: null,
                node: '隐私办审核',
                sourceActId: 0,
                subSteps: [],
                type: 'UserTask',
                units: [{ dealDate: null, memo: '', operate: '', user: 'testUser1' }],
              },
              node: '来自user的前加签',
              sourceActId: 0,
              subSteps: [],
              type: 'UserTask',
              units: [{ dealDate: null, memo: '', operate: '', user: 'testUser1' }],
            },
            node: '隐私办审核',
            sourceActId: 0,
            subSteps: [],
            type: 'UserTask',
            units: [{ dealDate: 1616503694000, memo: '加签test', operate: '加签', user: 'user' }],
          },
          {
            activityId: 0,
            finishDate: 1616503694000,
            next: {
              activityId: 0,
              finishDate: null,
              next: {
                activityId: 0,
                finishDate: null,
                next: null,
                node: '隐私办审核',
                sourceActId: 0,
                subSteps: [],
                type: 'UserTask',
                units: [{ dealDate: null, memo: '', operate: '', user: 'user' }],
              },
              node: '来自user的前加签',
              sourceActId: 0,
              subSteps: [],
              type: 'UserTask',
              units: [{ dealDate: null, memo: '', operate: '', user: 'user' }],
            },
            node: '隐私办审核',
            sourceActId: 0,
            subSteps: [],
            type: 'UserTask',
            units: [{ dealDate: 1616503694000, memo: '加签test', operate: '加签', user: 'user' }],
          },
        ],
        type: '',
        units: [],
      },
      node: '机审',
      sourceActId: 0,
      subSteps: [],
      type: 'SystemTask',
      units: [
        {
          dealDate: 1616503158000,
          memo: '当前未接入策略，需隐私办人工审核',
          operate: '隐私办人工审核',
          user: '蚂蚁流程',
        },
      ],
    },
    node: '数据接收',
    sourceActId: 0,
    subSteps: [],
    type: 'SystemTask',
    units: [
      {
        dealDate: 1616503156000,
        memo: '数据接收节点处理成功，自动向下推进',
        operate: '同意',
        user: '蚂蚁流程',
      },
    ],
  },
  node: '创建',
  sourceActId: 0,
  subSteps: [],
  type: 'Start',
  units: [{ dealDate: 1616503154000, memo: '创建节点', operate: '', user: 'testUser1' }],
};


/**
 * 通过回调获取当前节点信息。
 */
 export default () => {
  const [rankdir, setRankdir] = useState<'TB' | 'BT' | 'LR' | 'RL'>('LR');
  const [align, setAlign] = useState<'UL' | 'UR' | 'DL' | 'DR'>();
  const graphRef = useRef<any>();
  const isApprovedFun = (data: any) => data?.units?.some?.((unit) => unit.dealDate !== null);

  return (
    <div>
      <Card>
        <Row>
          <Col span={24}>
            rankdir: &nbsp;&nbsp;
            <Radio.Group
              onChange={(e) => {
                setRankdir(e.target.value);
              }}
              value={rankdir}
            >
              <Radio value="TB">TB</Radio>
              <Radio value="BT">BT</Radio>
              <Radio value="LR">LR</Radio>
              <Radio value="RL">RL</Radio>
            </Radio.Group>
          </Col>
          <Col span={24}>
            align: &nbsp;&nbsp;
            <Radio.Group
              onChange={(e) => {
                if (e.target.value === 'default') {
                  setAlign(undefined);
                } else {
                  setAlign(e.target.value);
                }
              }}
              value={align || 'default'}
            >
              <Radio value="default">default</Radio>
              <Radio value="UL">UL</Radio>
              <Radio value="UR">UR</Radio>
              <Radio value="DL">DL</Radio>
              <Radio value="DR">DR</Radio>
            </Radio.Group>
          </Col>
        </Row>
      </Card>
      <ParallelFlow
        getCurrent={({ graph }) => {
          graphRef.current = graph;
        }}
        rawData={mockData}
        loginUser="testUser1"
        processNodeProps={{
          showLabel: false,
          extraRender(node) {
            return (
              <div style={{ display: 'flex', justifyContent: 'center' }}>
                <span
                  style={{
                    whiteSpace: 'nowrap',
                  }}
                >
                  {node.node}
                </span>
              </div>
            );
          },
          iconRender(row, options) {
            const { isApproved, isApproving } = options;
            const style: React.CSSProperties = {
              width: 10,
              height: 10,
              background: isApproved ? '#1890ff' : '#ddd',
              borderRadius: 5,
              margin: '0 5px',
            };
            if (isApproving) {
              // 当前审批节点
              style.background = '#52c41a';
            }

            return <div style={style} />;
          },
        }}
        getNodeSize={() => ({ width: 20, height: 20 })}
        layoutEdgeMap={({ source }, defaultEdgeConfig) => {
          const config = {
            ...defaultEdgeConfig,
            connector: 'normal',
          };
          if (isApprovedFun(source)) {
            return {
              ...config,
              attrs: {
                line: {
                  stroke: '#1890ff',
                  strokeWidth: 1,
                },
              },
            };
          }
          return config;
        }}
        graphProps={{
          height: 450,
          scroller: {
            enabled: true,
            pannable: true,
            padding: 0,
          },
          connecting: {
            anchor: {
              name: 'iconCenter',
              args: {
                dx: 10,
              },
            },
            router: {
              name: 'manhattan',
              args: {
                step: 41,
              },
            },
          },
        }}
        dagreLayoutProps={{
          // 使用底层组件默认节点对齐方式，不设置将使用组件默认节点对齐方式；注：多行并行流程，样式可能无法达到预期效果，使用时注意验证效果；
          align,
          rankdir,
          ranksep: 50,
          nodesep: 40,
        }}
      />
    </div>
  );
};
